<template>
  <div class="bg-white rounded-lg m-1 text-sm">
    <div class="flex justify-between items-center p-2 border-b border-b-gray-300 ">
      <div v-if="item.orderStatus === 0">代付状态：<span style="color: #AE3D2E;">等待抢单</span></div>
      <div v-if="item.orderStatus != 0">代付状态：<span :style="getOrderColor(item.payStatus)">{{ item.payStatus == 0 ? '未支付'
        : '已支付' }}</span></div>
      <div v-if="item.orderStatus != 0">结算状态：<span :style="getSettlementColor(item.settlement)">{{
        settlementFormat(item.settlement) }}</span></div>
      <div v-if="item.orderStatus === 0">
        <button @click="showReport = true"
          class="border border-white text-white rounded bg-green-500 px-2 py-1">我要抢单</button>
      </div>
    </div>
    <div class="p-2">
      <div class="flex">系统单号：{{ item.orderNo }}
        <CopyBtn :text="item.orderNo" />
      </div>
      <div class="flex justify-between items-center">
        <div class="flex">代付金额：<span class="text-red-600">{{ item.amount }}</span>
          <CopyBtn :text="item.amount" />
        </div>
        <div class="flex">收款姓名：<span class="text-red-600">{{ item.payName }}</span>
          <CopyBtn :text="item.payName" />
        </div>
      </div>

      <div class="flex">收款账号：<span class="text-red-600">{{ item.payAccount }}</span>
        <CopyBtn :text="item.payAccount" />
      </div>
      <div class="flex justify-between items-center">
        <div>通道类型：{{ item.codeTitle }}</div>
        <div>银行名称：{{ item.bankName }}</div>
      </div>

      <div>抢单时间：{{ item.checkTime ? dayjs(item.checkTime * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}</div>

      <div class="flex justify-between items-center">
        <div>打款姓名：{{ item.payName }}</div>
        <div>打款账号：{{ item.payAccount }}</div>
      </div>
    </div>

    <div class="p-2 text-sm" v-if="item.orderStatus == 0 || item.orderStatus == 1">
      <div class="w-full h-1 bg-gray-200 rounded-full">
        <div class="h-1 bg-red-500 rounded-full" :style="{ width: percent + '%' }"></div>
      </div>
      <div class="text-gray-500 text-center mt-1">
        距离抢单截止倒计时剩余 {{ countdown }} 秒，请在抢单后立即付款
      </div>
    </div>

    <div v-if="item.payStatus == 0" class="flex justify-end items-center">
      <button @click="showReview=true" class="border border-white text-white rounded bg-red-500 px-2 py-1">点我处理代付打款</button>
    </div>

    <div v-if="item.orderStatus != 0 && item.payStatus != 0" class="w-full flex justify-end p-1">
      <div class="px-2 py-1 rounded-lg" :style="getOrderColor(item.orderStatus)">{{ OrderStatusFormat(item.orderStatus)
        }}</div>
    </div>

    <reportModal :show="showReport" :item="item" @confirm="() => { load(true) }" @close="showReport = false" />
    <reviewModal :show="showReview" :item="item" @confirm="() => { load(true) }" @close="showReview = false" />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import CopyBtn from '@/components/CopyBtn.vue';
import { GetReminderInfo } from '@/utils/system';
import reportModal from '../modal/reportModal.vue';
import reviewModal from '../modal/reviewModal.vue';
import { getOrderColor } from '@/utils/order';
import dayjs from 'dayjs';

const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {}
    }
  },
  load: {
    type: Function,
    default: () => { }
  }
})

const showReport = ref(false);
const showReview = ref(false);

let timer;

const dialog = ref({});

const countdown = ref(0);
const timerout = ref(false);
const percent = ref(0);
const orderStatus = ref([])

const timerFunc = () => {
  if (countdown.value <= 0) {
    timerout.value = true;
  } else {
    countdown.value--;
    percent.value = (1 - countdown.value / props.item.paymentListTime) * 100;
  }
};

onMounted(async () => {
  orderStatus.value = JSON.parse(localStorage.getItem('orderStatus'));
  dialog.value = await GetReminderInfo('payment_order_bottom');
  countdown.value = props.item.paymentListTime;
  timer = setInterval(timerFunc, 1000);
})

function OrderStatusFormat(status: string) {
  const item = orderStatus.value.find(item => {
    if (item.key == status) {
      return item.value
    }
  })
  return item?.value
}

function settlementFormat(status: number) {
  // 结算:0=未结算,1=已结算,2=代理反扣,3=系统返款,4=追扣中,5=追扣失败  
  const statusText = ['未结算', '已结算', '代理反扣', '系统返款', '追扣中', '追扣失败']
  return statusText[status]
}

function getSettlementColor(status: number) {
  let color = {}
  switch (Number(status)) {
    case 0:
      color = { color: '#5793DF' }
      break;
    case 1:
      color = { color: '#8CB24B' }
      break;
    case 2:
      color = { color: '#EB6E5E' }
      break;
    case 3:
      color = { color: '#EB6E5E' }
      break;
  }
  return color
}
</script>
